<template>
  <view class="_login">
    <view>
      <view v-if="loginType == 1">
        <u-input
          type="number"
          placeholder="输入手机号"
          class="phone input-item"
          v-model="phone"
          maxlength="11"
        >
          <view slot="prefix">
            <image
              src="../../../assets/images/login/phone.png"
              style="width: 48rpx; height: 48rpx"
              mode="scaleToFill"
              class="pre-icon"
            />
          </view>
        </u-input>
        <view class="flex flex-a-c">
          <u-input
            type="number"
            placeholder="输入验证码"
            class="phone input-item"
            maxlength="4"
            v-model="code"
          >
            <view slot="prefix">
              <image
                src="../../../assets/images/login/code.png"
                style="width: 48rpx; height: 48rpx"
                mode="scaleToFill"
                class="pre-icon"
              />
            </view>
          </u-input>
          <text
            @click="onGetCode"
            :class="time != 59 ? 'code-btn-disabled' : ''"
            class="code-btn t-center"
          >
            {{ btnText }}
          </text>
        </view>
      </view>
      <view v-else>
        <u-input
          type="number"
          placeholder="输入手机号"
          class="phone input-item"
          v-model="phone"
          maxlength="11"
        >
          <view slot="prefix">
            <image
              src="../../../assets/images/login/phone.png"
              style="width: 48rpx; height: 48rpx"
              mode="scaleToFill"
              class="pre-icon"
            />
          </view>
        </u-input>
        <view class="pwd-box flex">
          <u-input
            :type="openPwd ? 'text' : 'password'"
            placeholder="输入密码"
            class="phone input-item"
            v-model="pwd"
          >
            <view slot="prefix">
              <image
                src="../../../assets/images/login/lock.png"
                style="width: 48rpx; height: 48rpx"
                mode="scaleToFill"
                class="pre-icon"
              />
            </view>
          </u-input>
          <image
            @click="openPwd = !openPwd"
            v-if="!openPwd"
            class="eye"
            src="../../../assets/images/icons/eye-closed.png"
            alt=""
          />
          <image
            @click="openPwd = !openPwd"
            v-else
            class="eye"
            src="../../../assets/images/icons/eye.png"
            alt=""
          />
        </view>
      </view>
      <view @click="onLogin" class="login-btn fs-32 t-center">登录</view>
      <view class="login-way flex flex-bt fs-28 flex">
        <text class="active-text" @click="loginType = loginType == 2 ? 1 : 2">
          {{ loginType == 1 ? "密码登录" : "验证码登录" }}
        </text>
        <view>
          <text class="dark-text">没有账号？</text>
          <text class="active-text" @click="onRegister">立即注册</text>
        </view>
      </view>
    </view>
    <agreement ref="agreement" :showTip="showTip" @agree="onAgree" />
  </view>
</template>

<script>
import agreement from "../../../compennts/agreement/index.vue";
import {
  getCode,
  loginByCode,
  loginByPwd,
  getUserInfo,
} from "../../../api/auth";
export default {
  components: { agreement },
  data() {
    return {
      showPwd: false,
      btnText: "获取验证码",
      isAgree: false,
      time: 59,
      timer: null,
      loginType: 1,
      phone: "",
      code: "",
      pwd: "",
      openPwd: false,
      showTip: false,
    };
  },
  methods: {
    onAgree(val) {
      this.isAgree = val;
    },
    handleLogin(info) {
      console.log(info);
      uni.setStorageSync("token", info.accessToken);
      uni.setStorageSync("refreshToken", info.refreshToken);
      getUserInfo().then((res) => {
        uni.setStorageSync("userInfo", JSON.stringify(res.data));
      });
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    async onLogin() {
      if (!this.checkPhone()) return;
      if (!this.code)
        return uni.showToast({ title: "请输入验证码", icon: "none" });
      if (this.loginType == 1 && !this.code) return;
      if (!this.isAgree) {
        this.showTip = true;
        return;
      }
      if (this.loginType == 1) {
        loginByCode({
          mobile: this.phone,
          code: this.code,
        }).then((res) => {
          this.handleLogin(res.data);
        });
      } else {
        if (!this.pwd)
          return uni.showToast({ title: "请输入密码", icon: "none" });
        loginByPwd({
          mobile: this.phone,
          password: this.pwd,
        }).then((res) => {
          this.handleLogin(res.data);
        });
      }
    },
    onRegister() {
      this.$emit("register");
    },
    checkPhone() {
      if (!this.phone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return false;
      }
      let reg = /^(?:(?:\+|00)86)?1\d{10}$/;
      if (!reg.test(this.phone)) {
        uni.showToast({
          title: "请输入正确手机号",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    onGetCode() {
      if (!this.checkPhone()) return;
      if (this.time != 59) return;
      if (this.timer) clearInterval(this.timer);
      getCode({
        mobile: this.phone,
      }).then((res) => {
        console.log("code", res);
        this.btnText = this.time + "s";
        uni.showToast({
          icon: "none",
          title: "验证码已发送",
          duration: 3000,
        });
        this.timer = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            this.btnText = "获取验证码";
            clearInterval(this.timer);
            this.time = 59;
          } else {
            this.btnText = this.time + "s";
          }
        }, 1000);
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
._login {
  padding: 0 32rpx;
  // height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 80rpx;
  flex: 1;
  .input-item {
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 32rpx;
    height: 96rpx;
    font-size: 36rpx;
    flex: 1;
    .pre-icon {
      margin-top: 6rpx;
    }
  }
  .code-btn {
    width: 224rpx;
    height: 96rpx;
    display: inline-block;
    background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
    border-radius: 16rpx;
    margin-top: 32rpx;
    margin-left: 32rpx;
    color: #ffffff;
    line-height: 96rpx;
    &.code-btn-disabled {
      opacity: 0.5;
    }
  }
  .login-btn {
    color: #fff;
    background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 16rpx;
    margin-top: 64rpx;
  }
  .login-way {
    margin-top: 24rpx;
  }
}
.pwd-box {
  position: relative;
  .eye {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    right: 32rpx;
    top: 56rpx;
  }
}
</style>
